import { getAssetsImages } from '@/utils'
import { defineComponent } from 'vue'
import styles from './empowermentContent.module.less'
export default defineComponent({
  setup() {
    const owenList = [{
      title: '我们的宗旨',
      msg: ['培养更多有','自驱力的孩子'],
    },{
      title: '我们的责任',
      msg: ['让孩子学会学习','培养有能力','有担当的少年'],
    },{
      title: '我们的态度',
      msg: ['热爱  专注','精诚  自省'],
    },{
      title: '我们的原则',
      msg: ['一切为了学生','为了学生的一切'],
    },{
      title: '我们的境界',
      msg: ['知行合一','拥抱变化'],
    },]
    return () => (
      <div class={styles['empowerment-layout']}>
        <div class={styles['empowerment-top']}>
          <p class={styles['top-text1']}>我们希望</p>
          <p class={styles['top-text2']}>让孩子在有爱、有趣、有成长的三层体验中成长，逐步成为有能力、有担当、有正向价值观的有为青少年！</p>
          <p class={styles['top-text3']}>我们相信</p>
          <p class={styles['top-text4']}>在不断学习“深度思考、结构化表达、友善合作、方法论学习、定期复盘”五项技能中！
            <br />
            <br />
          助力孩子成为具备视野格局、拥有内驱力、阅读力、迁移实践力、思考力、以及解决问题的能力！
</p>
        </div>
        <img src={getAssetsImages('image2.webp')} class={styles['empowerment-image']} alt="" />
        <div class={styles['empowerment-list']}>
         
            {owenList.map((item,index) => {
              return <div class={[styles['empowerment-item'],styles[`our${index}`]]} >
                <div class={styles['item-text1']}>{item.title}</div>
                <div class={styles['item-text2']}>
                {item.msg.map(msg => {
                  return <p class={styles['text2-msg']}>{ msg}</p>
                })}
                </div>
               
              </div>
            })}
            
          
        </div>
      </div>
    )
  }
})
